<template>
    <div class="sidebar" >
        <el-menu :collapse-transition="false"
                 class="menuStyle"

                 :collapse="isCollapse"
                 :router="true">
<!--            侧边栏上部的图标-->
            <el-menu-item class="imgStyle" index="/frontFramework/">
                <img src="../../assets/static/img/sidebar_logo.jpg" alt="MyWorld"  width="30" height="30">
                <span slot="title" style="margin-left: 5px">影资管理系统</span>
            </el-menu-item>
<!--            侧边栏内容-->
            <el-submenu index="1"  >
                <template slot="title" >
                    <i class="el-icon-notebook-2"></i>
                    <span slot="title">影资</span>
                </template>
                <el-menu-item-group >
                    <el-menu-item index="/backendFramework/blog" class="item">影资管理</el-menu-item>
                    <el-menu-item index="/backendFramework/comment" class="item">评论管理</el-menu-item>
                    <el-menu-item index="/backendFramework/label" class="item">标签管理</el-menu-item>
                </el-menu-item-group>
<!--                <el-menu-item-group title="分组2">-->
<!--                    <el-menu-item index="1-3" >选项3</el-menu-item>-->
<!--                </el-menu-item-group>-->
<!--                <el-submenu index="1-4">-->
<!--                    <span slot="title">选项4</span>-->
<!--                    <el-menu-item index="1-4-1">选项1</el-menu-item>-->
<!--                </el-submenu>-->
            </el-submenu>
            <el-menu-item index="/backendFramework/inform">
                <i class="el-icon-postcard"></i>
                <span slot="title">通知</span>
            </el-menu-item>
            <el-menu-item index="/backendFramework/advertisement">
                <i class="el-icon-coffee-cup"></i>
                <span slot="title">广告</span>
            </el-menu-item>
            <el-submenu index="2"  >
                <template slot="title" >
                    <i class="el-icon-setting"></i>
                    <span slot="title">系统</span>
                </template>
                <el-menu-item-group >
                    <el-menu-item index="/backendFramework/system/dataSetting" class="item">数据管理</el-menu-item>
                </el-menu-item-group>

            </el-submenu>

        </el-menu>

    </div>

</template>

<script>
    export default {
        name: "SidebarComponent",
        props:{
            //侧边栏是否折叠
            isCollapse: Boolean,
        },
        data() {
            return {
            };
        },
        methods: {
        }

    }
</script>

<style scoped>
    .sidebar{
        height: 100vh;
        width: 100%;
        display: flex;
    }
    .imgStyle{
        width: 100%;
    }
    .menuStyle{
        width: calc(100% - 1px);
    }

    .item{
        min-width: 192px;
    }





</style>
